<template>
    <div class="common-size">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="repair-base-chart clear">
            <div ref="chartd" class="pie-chart left"></div>
            <table class="left pie-chart-desc">
                <tbody>
                <template v-for="(item,index) in descData">
                    <tr >
                        <td ><i v-bind:class="'i-'+(index+1) "></i></td>
                        <td>{{item.name}}</td>
                    </tr>
                    <tr  class="bottom">
                        <td></td>
                        <td>{{item.value}}次；占比{{item.percent}}%</td>
                    </tr>
                </template>

                </tbody>
            </table>
            <h2 class="charts_title">内外修情况分布</h2>
        </div>
        <h3 class="consume-time-title">平均耗时</h3>
        <div class="repair-base-chart">
            <p class="chart-units">设备数量（台）</p>
            <table class="repair-time">
                <tbody>
                    <template v-for="(item,index) in timeData">
                    <tr>
                        <td>{{item.name}}</td>
                        <td><div class="bg-column"><div class="light-column" v-bind:style="'width:'+(item.percent)+'%'"></div></div></td>
                        <td>{{item.value}}天</td>
                    </tr>
                    </template>
                    <!--<tr>-->
                        <!--<td>內修</td>-->
                        <!--<td><div class="bg-column"><div class="light-column"></div></div></td>-->
                        <!--<td>2.5天</td>-->
                    <!--</tr>-->
                </tbody>
            </table>
            <p class="repair-time-note">内外修平均时长分布</p>
        </div>
        <p class="repair-time-instruction">医院设备多采用內修维修，內修时长多于外修时长</p>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
    import { merge ,throttle} from "lodash"
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // 引入饼状图
    require('echarts/lib/chart/pie');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');

    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'
    export default {
        name: 'repair_base_case',
      props:['chartData'],
      mixins: [nuxtMixins],
        data(){
            return {
                getDefaultOptions: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [{
                        name: '重点设备使用情况分析',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        center: ['50%', '50%'],
                        clockwise: true,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: '#FFF',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show:false
                            }
                        }
                    }]


                },
              pageTitle: '维修基本情况',
              detailTitle: '维修情况'
            }
        },
        computed:{
          textData () {
            return this.chartData.textData
          },
          descData () {
            return this.chartData.chartData
          },
          timeData () {
            return this.chartData.timeData
          }
        },

        methods: {
            updateDimensions(){
                this.chart.resize();
            },
            readyRenderLineChart(){
                if(!this.$props.chartData.chartData) return
                let chartData=this.$props.chartData.chartData;
                let linearColor = this.readyLinearColor;
                let learColor = [
                    {start:'#5a8cc4',end:'#98badf'},
                    {start:'#8fbb7c',end:'#adce9e'},
                    {start:'#86bb7d',end:'#adcfd0'},
                    {start:'#ecc950',end:'#f4e19b'},
                    {start:'#e5916d',end:'#efbf8f'}
                ]
                chartData.forEach((obj,index)=>{
                    obj['itemStyle'] = {
                        normal: {
                         color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: learColor[index].start // 0% 处的颜色
                            }, {
                                offset: 1, color: learColor[index].end // 100% 处的颜色
                            }]

                            }
                        }
                    }

                });
                this.getDefaultOptions.series[0]['data'] = chartData
                this.chart.setOption(this.getDefaultOptions);
            },
        },
        mounted: function () {
            this.chart = echarts.init(this.$refs.chartd)
            window.addEventListener("resize", throttle(this.updateDimensions));
            this.readyRenderLineChart()
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .repair-time-instruction{
        color: #656666;
        line-height: 1.8em;
        font-size: 14px;
        width: 100%;
        text-align: center;
        padding: 3% 0 0 0;
    }
    .repair-base-chart{
        .chart-units{
            color: #898c8c;
            font-size: 14px;
            text-align: right;
            width: 86%;
            margin: 0 auto;
            padding: 10% 0 1% 0;
        }
        height: auto;
        margin: 20px 35px 0 35px;
        position: relative;
        background: #ffffff;
        height: 360px;
        .pie-chart{
            width: 50%;
            height:360px;
        }
        .pie-chart-desc{
            margin: 100px 0 0 30px;
            >tbody{
                >tr{
                    >td{
                        color: #666;
                        >b{
                            color: #0A122D;
                        }
                        >i{
                            width: 10px;
                            height:10px;
                            display: inline-block;
                            border-radius: 10px;

                            &.i-1{
                                background: linear-gradient(to bottom, #4b8bc9, #91ecb4);
                            }
                            &.i-2{
                                background: linear-gradient(to bottom, #75c075, #a4d39b);
                            }
                        }
                    }
                    &.bottom{
                        >td{
                            padding-bottom: 10px;
                        }
                    }
                }
            }
        }
        >h2{
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
        }

        .repair-time{
            width: 86%;
            margin: 0 auto;
            border-collapse: collapse;
            >tbody>tr{
                >td{
                    border: 1px solid #e6e6e3;
                    height: 70px;
                    &:nth-child(1){
                        background: #f7f7f6;
                        color: #898c8c;
                        font-size: 14px;
                        text-align: center;
                    }
                    &:nth-child(2){
                        width: 65%;
                        .bg-column{
                            width: 90%;
                            height: 15px;
                            background: #e8e7e3;
                            border-radius: 15px;
                            overflow: hidden;
                            position: relative;
                            margin: 0 auto;
                            .light-column{
                                position: absolute;
                                border-radius: 15px;
                                top:0;
                                left:0;
                                width: 50%;
                                height: 100%;
                                background: linear-gradient(to right, #4e80b5, #8eb5d6);
                            }
                        }
                    }
                    &:nth-child(3){
                        background: #f7f7f6;
                        color: #000;
                        font-weight: bold;
                        font-size: 16px;
                        text-align: center;
                    }
                }
            }
        }
        .repair-time-note{
            font-size: 16px;
            color: #606279;
            text-align: center;
            width: 100%;
            padding: 6% 0 0 0;
        }
    }

    .consume-time-title {
        color: #0a122d;
        font-weight: 700;
        margin-top:35px;
        margin-bottom: 15px;
        font-size: 16px;
        padding: 0 35px;
    }


</style>
